<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>天气案例</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<h1>今天天气很{{wetherInfo}}</h1>
			<!-- 
				绑定事件的时候:@xxx="yyy"yyy可以写一些简单的语句，如：
				<button @click="isHot = !isHot">切换天气</button>
			-->
			<button type="button" @click="changeWether">切换天气</button>
		</div>
		<!-- 
			监视属性watch:
			1.当被监视的属性变化时，回调函数(就是handler函数)自动调用，进行相关操作
			2.监视的属性必须存在，才能进行监视!!
			3.监视的两种写法:
			(1).new Vue时传入watch配置
			(2).通过vm.$watch监视
		 -->
	</body>
	<script type="text/javascript">
		const vm = new Vue({
			el: '#root',
			data: {
				isHot: false,
			},
			methods: {
				changeWether() {
					//this.wether = this.isHot ? '凉爽' : '炎热'
					this.isHot = !this.isHot
				}
			},
			computed: {
				wetherInfo() {
					return this.isHot ? '炎热' : '凉爽'
				}
			},
			watch: {
				/* isHost是简写，完整写法是'isHot':{}。
				 * 其实isHot是个key。
				 */
				isHot: { //监视data定义的isHot属性。
					//handler什么时候调用?当isHot发生改变时。
					//handler有2个参数，分别为newVaule,oldValue
					immediate: true, //初始化时是否立即让handler调用，默认false
					handler(newValue, oldValue) {
						console.log('@@@', newValue, oldValue)
					}
				}
			}
		})
		//监视另一种写法，注意一定要vm实例创建完成。
		//后面是配置对象。
		vm.$watch('isHot', {
			immediate: true, //初始化时是否立即让handler调用，默认false
			handler(newValue, oldValue) {
				console.log('@@@', newValue, oldValue)
			}
		})
	</script>
</html>